<template>
  <a-layout class="app-layout">
    <a-layout-header>
      <router-link to="/">
        <h2>海报实验室</h2>
      </router-link>
      <UserProfile />
    </a-layout-header>
    <a-layout-content>
      <router-view></router-view>
    </a-layout-content>
    <a-layout-footer>
      © 海报实验室（xxx.com）版权所有 | 津ICP备20xxxxxx号-2
    </a-layout-footer>
  </a-layout>
</template>

<script setup lang="ts">
import UserProfile from '@/components/UserProfile.vue'
</script>

<style lang="less" scoped>
.app-layout {
  .ant-layout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    h2 {
      margin-bottom: 0;
    }
  }
  .ant-layout-footer {
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
  }
}
</style>
